<template>
  <a-spin :spinning="confirmLoading">
    <j-form-container :disabled="false">
      <a-form-model ref="form" :model="model" :rules="validatorRules" slot="detail">
        <a-row :gutter="48">
          <a-col :span="12">
            <a-form-model-item label="项目成员" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="projectMember">
              <select-user-by-dep
                :disabled="model.isProjectLeading"
                placeholder="请选择项目成员"
                :multi="false"
                v-model="model.projectMember"
                @back="handleMemberChange" />
            </a-form-model-item>
          </a-col>
          <a-col :span="12">
            <a-form-model-item label="分配合同额(元)" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="contractAmount">
              <a-input-number
                :max="999999999"
                :min="0"
                :precision="2"
                v-model="model.contractAmount"
                placeholder="请输入分配合同额"
                style="width: 100%"
              />
            </a-form-model-item>
          </a-col>
          <a-col :span="24">
            <a-form-model-item label="合同额占比(%)" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="contractRate">
              <a-input
                addon-after="%"
                disabled
                :max="99999999"
                v-model="model.contractRate"
                :precision="2"
                placeholder="成员匹配合同额/任务委托合同额"
                style="width: 100%"/>
            </a-form-model-item>
          </a-col>
          <a-col :span="12">
            <a-form-model-item label="工时单价(元)" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="dayCost">
              <a-input-number
                :max="999999999"
                :min="0"
                :precision="2"
                v-model="model.dayCost"
                placeholder="请输入工时单价"
                style="width: 100%"
                disabled
              />
            </a-form-model-item>
          </a-col>
          <a-col :span="12">
            <a-form-model-item label="预算工时(小时)" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="expectWorkTime">
              <a-input-number
                :max="999999999"
                :min="0"
                :precision="1"
                v-model="model.expectWorkTime"
                placeholder="请输入预算工时"
                style="width: 100%"
              />
            </a-form-model-item>
          </a-col>
          <a-col :span="12">
            <a-form-model-item label="项目绩效(元)" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="projectPerformance">
              <a-input-number
                :max="999999999"
                :min="0"
                :precision="2"
                v-model="model.projectPerformance"
                placeholder="请输入项目绩效"
                style="width: 100%"
              />
            </a-form-model-item>
          </a-col>
          <a-col :span="12">
            <a-form-model-item label="人工成本(元)" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="laborCost">
              <a-input-number
                :max="999999999"
                :min="0"
                :precision="2"
                v-model="model.laborCost"
                placeholder="请输入项目人工成本"
                style="width: 100%"
                disabled
              />
            </a-form-model-item>
          </a-col>
        </a-row>
      </a-form-model>
    </j-form-container>
  </a-spin>
</template>

<script>
  import { getAction } from '@/api/manage'
  // import { validateDuplicateValue } from '@/utils/util'
  import SelectUserByDep from '@/views/scy/components/SelectUserByDep'
  import {
    // filterMultiDictText,
    initDictOptions
  } from '@/components/dict/JDictSelectUtil'

  export default {
    name: 'ErpOmcTaskMemberForm',
    components: {
      SelectUserByDep
    },
    props: {
      // 表单禁用
      disabled: {
        type: Boolean,
        default: false,
        required: false
      },
      // 费用所属团队
      teamId: {
        type: String,
        default: null,
        required: false
      },
      applicant: {
        type: String,
        default: null,
        required: false
      },
      contractAmount: {
        type: Number,
        default: null
      },
      // 主表id
      mainId: {
        type: [Number, String],
        default: null
      }
    },
    data () {
      return {
        model: {
          projectMember: null,
          contractAmount: null,
          contractRate: null
         },
        labelCol: {
        },
        wrapperCol: {
          xs: { span: 24 },
          sm: { span: 24 }
        },
        projectType: '2',
        confirmLoading: false,
        validatorRules: {
          projectMember: [
            { required: true, message: '请选择项目成员!' }
          ],
          contractAmount: [
            { required: true, message: '请输入分配合同额!' }
          ],
          contractRate: [
            { required: true, message: '请输入合同额占比!' }
          ],
          expectWorkTime: [
            { required: true, message: '请输入预算工时!' }
          ],
          projectPerformance: [
            { required: true, message: '请输入项目绩效!' }
          ],
        },
        url: {
          queryPayGradeByEmpId: '/api/erp/files/employee/erpEmployeeFile/queryPayGradeByEmpId'
        },
        dictOptions: {}
      }
    },
    computed: {
      formDisabled() {
        return this.disabled
      },
      rate() {
        return [this.model.contractAmount, this.contractAmount]
      },
      laborCost() {
        return [this.model.dayCost, this.model.expectWorkTime, this.model.projectPerformance]
      }
    },
    watch: {
      rate: {
        handler() {
          if (this.model.contractAmount === null) return
          
          if (this.model.contractAmount === null || this.model.contractAmount === '') {
            this.model.contractAmount = null
            this.model.contractRate = null
            return
          }
          if (!Number(this.contractAmount)) {
            this.model.contractRate = 0.00
            return
          }
          let rate = this.model.contractAmount / this.contractAmount * 100
          this.model.contractRate = Math.round((rate + Number.EPSILON) * 100) / 100;
        },
        // immediate: true
      },
      laborCost: {
        handler() {
          const { dayCost, expectWorkTime, projectPerformance } = this.model
          const format = (num) => (Number(num) || 0)

          function parse(num) {
            return Number(Number(num).toFixed(2))
          }

          this.model.laborCost = parse(format(dayCost) * format(expectWorkTime) / format(8) + format(projectPerformance))
        },
        immediate: true
      }
    },
    created () {
       // 备份model原始值
      this.modelDefault = JSON.parse(JSON.stringify(this.model));
      // 加载数据字典信息
      this.initDictConfig();
    },
    methods: {
      handleMemberChange(data) {
        const item = data[0]
        if (!item) return void (0)

        getAction(this.url.queryPayGradeByEmpId, { empId: item.empId })
          .then(response => {
            // debugger
            this.$set(this.model, 'dayCost', response.result)
          })
      },
      // 加载字典
      initDictConfig() {
        initDictOptions('sys_category,name,code').then((res) => {
          if (res.success) {
            this.$set(this.dictOptions, 'big_category_salary', res.result)
          }
        })
      },
      add () {
        this.edit(this.modelDefault);
      },
      edit (record) {
        this.$refs['form'].clearValidate();
        Object.assign(this.$data, this.$options.data())
        this.model = Object.assign({}, record);
        this.visible = true;
      },
      submitForm () {
        // 触发表单验证
        this.$refs.form.validate(valid => {
          if (valid) {
            if (!this.model.id) {
              this.model.id = parseInt(Math.random() * 1000000000000);
              this.model.mainId = this.mainId
            }
            this.$emit('ok', this.model);
          }
        })
      }
    }
  }
</script>
